<template>
	<div class="user-team">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				他的团队
			</div>
			<div class="right"
				@click="goIndex()"
			>
				返回我的
			</div>
		</div>
		<div class="ut-content">
			<div class="ut-c-leader">
				<div class="ut-cl-content">
					<img :src="avatar" />
					<div class="ut-cl-right">
						<p>{{nickname}}</p>
					</div>
				</div>
			</div>
			<div class="ut-agent"
				id="ut-agent"
			>
				<div class="ut-a-items"
					v-for="(team, index) in teamList"
					@click="goDetail(team)"
					v-if="teamList.length>0"
				>
					<div class="ut-a-item border-1px">
						<div class="ut-at-left">
							<img v-lazy="team.avatar" />
							<div class="ut-at-right">
								<p class="name">{{team.nickname}}</p>
								<p class="lv">{{team.type}}</p>
								<p class="time">{{team.createtime}}</p>
							</div>
						</div>						
						<div class="ut-at-item">
							<p>推荐人数：{{team.num}}</p>
							<p>订单数量：{{team.order_num}}</p>
						</div>
					</div>
					<div class="ut-a-bottom">
						<div class="ut-ai-item">
							<p>上月结算</p>
                            <span>{{team.last_income}}</span>
						</div>
						<div class="ut-ai-item">
							<p>本月预估</p>
                            <span>{{team.predict_income}}</span>
						</div>
						<div class="ut-ai-item">
							<p>今日预估</p>
                            <span>{{team.today_commission}}</span>
						</div>
					</div>
				</div>
				<div class="none"
					v-if="teamList.length == 0"
				>
				 	他还没有粉丝哟~
				</div>
			</div>
		</div>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	import GoTop from '../components/GoTop.vue'
	export default{
		components: {
			GoTop
		},
		data(){
			return{
				topclass: false,
				page: 1,
				type: 1,
				mobile: '',
				list: [],
				teamList: [],
				avatar: this.$route.query.avatar,
				nickname: this.$route.query.nickname
			}
		},
		mounted(){
			// axios.post(Http.FANS)
			// .then( res => {
			// 	var ret = res.data;
			// 	this.list = ret.data;
			// })
			this.getData();
			window.addEventListener('scroll', this.handleScroll);
		},
		watch: {
		    '$route' (to, from) {
		    	this.$router.go(0);
			}
		},
		methods: {
			goTop: function(){
                document.getElementById("ut-c-content").scrollIntoView();
            },
            goIndex: function(){
            	this.$router.push('/user')
            },
			handleScroll: function(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var scrollHeight = document.querySelector('#ut-agent').scrollHeight;
                var offsetTop = document.querySelector('#ut-agent').offsetTop;
                if(scrollTop > 850){
                	this.topclass = true;
                }else if(scrollTop < 850){
                	this.topclass = false;
                }
                if( scrollTop > offsetTop - 30 ){
                    this.fixclass = true;
                    this.marginTop = document.querySelector('#ut-agent').offsetHeight + 'px';
                }else{
                    this.fixclass = false;
                    this.marginTop = 0;
                }
                if (scrollHeight - scrollTop < 350){
                	this.page++;
                	document.getElementById('help').style.display="none";
                	var params = new URLSearchParams();
	                params.append('id', this.$route.params.id);
	                params.append('page', this.page);
	                axios.post(Http.FANSTEAM,params)
	                .then( res => {
	                    var ret = res.data;
						this.tList = ret.data;
						if(ret.code == 1){
							this.teamList = this.teamList.concat(this.tList);	
						}
						                    
	                })
                }
            },
			goDetail: function(team){
				this.$router.push({
					path: '/user/team/detail/' + team.id,
					query: {
						avatar: team.avatar,
						nickname: team.nickname
					}
				})
			},
			getData(){
                document.getElementById('help').style.display="none";
				var params = new URLSearchParams();
				params.append('id', this.$route.params.id);
				params.append('page', this.page);
				axios.post(Http.FANSTEAM, params)
				.then( res => {
					var ret = res.data;
					this.teamList = ret.data;
				})
			}
		},
		destroyed () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll)
        }
	}
</script>
<style lang="scss" scoped>
	.user-team{
		.com-header{
			.right{
				width: 1.2rem;
			}
		}
		.ut-content{
			background: #f1f7f8;
			min-height: 12rem;
			padding: 0 0.24rem;
			padding-top: 0.2rem;
			.ut-c-leader{
				width: 100%;
				background: #fff4fe;
				border-radius: 0.2rem;
				box-shadow: 0 0 0.1rem #dbe2f7;
				.ut-cl-content{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0.2rem;
					img{
						margin-right: 0.2rem;
						width: 1rem;
						height: 1rem;
						border-radius: 1rem;
					}
					.ut-cl-right{
						text-align: left;
						font-size: 0.26rem;
						p{
							font-weight: 700;
						}
						span{
							color: #666;
						}
					}
				}
			}
			.ut-c-content{
				margin-top: 0.2rem;
				width: 100%;
				border-radius: 0.2rem;
				background: #fff;
				.ut-cc-header{
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding-top: 0.2rem;
					padding-bottom: 0.2rem;
					.ut-cc-item{
						width: 1.8rem;
						height: 1.8rem;
						border-radius: 1.8rem;
						border: 0.1rem solid #f5f5f5;
						&.active{
							border: 0.1rem solid #f79e18;
							color: #ff3d00;
						}
						.num{
							margin-top: 0.5rem;
						}
					}
				}
				.ut-cc-nav{
					display: flex;
					align-items: center;
					padding: 0.2rem 0;
					.ut-cn-item{
						flex: 0 0 25%;
						&.active{
							color: #ff3d00;
						}
					}
				}
			}
			.ut-sea{
				position: relative;
				margin-top: 0.2rem;
				width: 92%;
				padding: 0.3rem 4%;
				border-radius: 0.2rem;
				background: #fff;
				i{
					position: absolute;
					top: 0rem;
					right: 0rem;
					width: 1.4rem;
					height: 1.1rem;
					line-height: 1.1rem;
					font-size: 0.3rem;
					color: #666;
				}
				input{
					width: 100%;
					height: 0.5rem;
					line-height: 0.5rem;
					background: #f5f5f5;
					border-radius: 0.5rem;
					text-indent: 0.2rem;
				}
			}
			.ut-agent{
				.ut-a-items{
					margin-top: 0.2rem;
					width: 100%;
					background: #fff;
					border-radius: 0.2rem;
					padding-bottom: 0.1rem;
					.ut-a-item{
						margin: 0 0.2rem;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0.2rem 0;
						.ut-at-left{
							display: flex;
							img{
								margin-right: 0.2rem;
								width: 1rem;
								height: 1rem;
								border-radius: 1rem;
							}
						}
						
						.ut-at-right{
							text-align: left;
							.name{
								font-weight: bold;
								color: #333;
								font-size: 0.26rem;
							}
							.time{
								font-size: 0.20rem;
							}
							.lv{
								padding: 0.04rem 0;
								width: 1rem;
								border-radius: 0.04rem;
								background: #f5f5f5;
								text-align: center;
								margin: 0.08rem 0;
								font-size: 0.20rem;
							}
						}

						.ut-at-item{
							border-left: 0.01rem solid #e1e1e1;
							padding-left: 0.2rem;
						}
						
					}
					.ut-a-bottom{
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin: 0.2rem 0;
						.ut-ai-item{
							font-size: 0.24rem;
							p{
								margin-bottom: 0.1rem;
							}
							span{
								color: $color;
							}
						}
					}
				}
				.none{
					padding: 1rem 0;
					font-size: 0.28rem;
					font-weight: 800;
				}
			}
		}
	}
</style>